@{
    var divisions = Groupon.GetDivisions(show: "id,name");
}

<h3>Groupon.GetDeals() Method + Bing Map</h3>

<p>This sample page shows how you can display Groupon Deals over a Bing Map. For implementation details check this page source code and the Groupon\GetDeals.cshtml page, used to provide the deals location for the Bing map API.</p>

@Html.Label("Select a Division"): 
@Html.DropDownList("divisionsList", divisions.Select(d => new SelectListItem {Text = d.name, Value = d.id}), new {onchange = "ShowDeals()"})

<div id='dealsMap' style="border: 1px solid black"></div>

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script type="text/javascript">
    var map = null;
    
    function GetMap() {
        map = new VEMap('dealsMap');
        map.LoadMap();
        map.SetZoomLevel(10);        
        
        ShowDeals();
    }

	function AddDealCustomPushpin(deal) {
        var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(deal.location.lat, deal.location.lng));  
        
        shape.SetDescription('<div style="width:330px;padding:0px;margin:0px;"><img src=' + deal.imageURL + ' style="float:left;height:90px;margin-right:7px;" /><div style="line-height:1.5em;" ><b>' + deal.title + '</b><br/>' + deal.details + '</div><a href=' + deal.dealURL +'>More Info</a></div>');
		shape.SetCustomIcon("<img src='Styles/images/grouponIcon.png'/>"); 
		
        map.AddShape(shape);
    }
    
    function OnDealsReceived(deals) {
        map.DeleteAllShapes();
        map.SetCenter(new VELatLong(deals[0].division.lat, deals[0].division.lng));
        map.ClearInfoBoxStyles();
        
        for (i in deals) {
            AddDealCustomPushpin(deals[i]);
		}
	}
    
    function ShowDeals() {
        var divisionId = document.getElementById('divisionsList').value;
        
        $.ajax({
            url: "@Href("~/Groupon/GetDeals/")" + divisionId,
            success: function(json) {
                OnDealsReceived(json);
            }
        })
	}
    
    GetMap();
</script>